<template>
    <div class="WsyjPatientDistribution" id="WsyjPatientDistribution-MultBar" style="height: 100%">
        <!-- 应急力量日投入统计力量需求【折柱图】  -->
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import '../../util/GVChartDataConvert';
    import GVChartDataConvert from '@/util/GVChartDataConvert';
    import {chartServer} from '@/api/installServer';
    import publishObjectPath from '@/util/configRegistry';

    const districtCode = publishObjectPath.value.districtCode;

    @Component({
        // 组件名
        name: 'WsyjPatientDistribution',
        // 依赖那些组件
        components: {}
        // 其他待定
    })
    export default class WsyjPatientDistribution extends Vue {

        public data?: any;
        private gvChart?: any;

        // 生命周期顺序
        public mounted() {
            // 加载统计组件模板
            gv.config.ChartTemplate.load();

            // 表格挂载位置
            /*const dom = document.getElementById('WsyjPatientDistribution-MultBar');
            const data = this.getData();

            const source = new gv.source.SimpleSource(data);
            this.gvChart = new gv.chart.BasicBarChart(source, dom);
            this.setStyle();
            this.gvChart.render();*/

            const url = '/epidemic/situation/region/distribution';
            const that = this;
            chartServer.getConfig(url, {districtCode: districtCode}).then((result: any) => {
                if (
                    result.data &&
                    result.status === 200 &&
                    result.data.code === 0 &&
                    result.data.data
                ) {
                    that.data = result.data.data;
                    const source = new gv.source.SimpleSource(
                        GVChartDataConvert.convert(that.data)
                    );
                    const dom = document.getElementById(
                        'WsyjPatientDistribution-MultBar'
                    );
                    this.gvChart = new gv.chart.BasicBarChart(source, dom);
                    this.setStyle();
                    this.gvChart.render();
                }
            });
        }

        private setStyle() {
            // 显示条目数（系列）
            const num: number = 5;
            // 总条目数
            const allNum: number = this.data.items.length;
            const end = Math.floor(100 * num / allNum);
            const that = this;

            this.gvChart.config('dataZoom', {
                start: 0,
                end: end,
                top: '90%',
                height: 6,
                backgroundColor: 'rgba(144,147,153,0.3)',
                borderColor: 'transparent',
                handleSize: 12,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                textStyle: {
                    color: '#fff',
                    fontSize: 8
                },
                labelFormatter: function (val:number) {
                    const str: string = that.data.items[val].entrys[0].value;
                    return that.setLabelStyle(str);
                }
            });
            this.gvChart.config('grid', {
                top: 20,
                left: '10%',
                right: '11.5%'
            });

            this.gvChart.config('xAxis', {
                axisLabel: {
                    color: '#ffffff',
                    formatter: that.setLabelStyle
                },

                splitLine: {show: false},
                axisLine: {
                    lineStyle: {
                        color: 'rgba(114,114,114,0.8)'
                    }
                }
            });

            this.gvChart.config('yAxis', {
                axisLabel: {
                    color: '#ffffff'
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(114,114,114,0.8)'
                    }
                },
                axisLine: {show: false},
                axisTick: {show: false}
            });

            this.gvChart.config('legend', {
                textStyle: {
                    color: '#ffffff'
                },
                itemWidth: 14,
                top: 'top',
                right: '10%'
            });

            this.gvChart.config('tooltip', {
                formatter : function (d: any) {
                    let tempColor,tempValue;
                    if(d[0].componentIndex ==1){
                        tempColor="#ee8240";
                        tempValue=d[0].data.b;
                    }else {
                        tempColor="#ce3636";
                        tempValue=d[0].data.a;
                    }
                    if(d.length==1){
                        return  `${d[0].name}<br>
<div style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:5px;background:${tempColor}"></div>${d[0].seriesName}：${tempValue}例`
                    }else {
                        return  `${d[0].name}<br>
<div style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:5px;background:#ce3636"></div>${d[0].seriesName}：${d[0].data.a}例<br>
<div style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:5px;background:#ee8240"></div>${d[1].seriesName}：${d[1].data.b}例`
                    }



                }
            });

            this.gvChart.config('series[0]', {
                barWidth: 20,
                itemStyle: {
                    borderWidth: 0,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {offset: 0, color: 'rgb(206,54,54)'},
                            {offset: 0.1, color: 'rgb(206,54,54)'},
                            {offset: 0.11, color: 'rgba(206,54,54,0.5)'},
                            {offset: 1, color: 'rgba(206,54,54,0)'}
                        ]
                    }
                }
            });
            this.gvChart.config('series[1]', {
                itemStyle: {
                    borderWidth: 0,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {offset: 0, color: 'rgb(238,130,64)'},
                            {offset: 0.1, color: 'rgb(238,130,64)'},
                            {offset: 0.11, color: 'rgba(238,130,64,0.5)'},
                            {offset: 1, color: 'rgba(238,130,64,0)'}
                        ]
                    }
                }
            });
        }

        private setLabelStyle(val: string): string {
            const len = val.length;
            if (len === 5) {
                return val.slice(0, 2) + '\n' + val.slice(2);
            } else if (len === 6 || len === 7) {
                return val.slice(0, 3) + '\n' + val.slice(3);
            } else {
                return val.slice(0, 4) + '\n' + val.slice(4);
            }
            return val;
        }

        // 自己方法
        private getData() {
            const items = [];
            const name = ['岸我耐我', '广西壮族自治区', '你好世界啦啦啦啦', '汉阳区我', '武昌区我', '青山区我', '洪山区', '蔡甸区', '江夏区', '黄陂区', '新洲区', '东西湖区', '汉南区我'];
            for (let i = 0; i < name.length; i++) {
                items.push({
                    entrys: [
                        {name: 'x', alias: '区域', value: name[i]},
                        {name: 'a', alias: '确诊病例', value: Math.round(Math.random() * 10 + 5)},
                        {name: 'b', alias: '疑似病例', value: Math.round(Math.random() * 10 + 15)},
                    ]
                })
            }
            this.data = this.data || {
                items: items
            };
            return GVChartDataConvert.convert(this.data);
        }
    }
</script>

<style scoped>
    .WsyjPatientDistribution {
        height: 100%;
        width: 100%;
    }
</style>
